<template>
    <div style="width: 100%; height: 250px" ref="chartRef" />
</template>
<script lang="ts">
import { isNotEmpty } from '@/utils/is';
import { useEcharts } from '@/hooks/common/useEcharts';
import { defineComponent, nextTick, ref, unref, watch } from 'vue';
export default defineComponent({
    name: 'EChart',
    props: {
        defaultOption: { type: Object, default: () => ({}) },
        option: { type: Object, default: () => ({}) },
        defaultColor: {
            type: Array,
            default: () => []
        }
    },
    setup(props) {
        const chartRef = ref<any>();
        const defaultOption = ref<any>({
            color: null,
            title: {
                // text: props.defaultOption.title || '业务需求总数',
                // subtext: props.defaultOption.numTotal || 0,
                x: 'center',
                y: 'center',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14,
                    color: '#000'
                }, // 标题
                subtextStyle: {
                    fontWeight: 'bold',
                    fontSize: 25,
                    color: '#000'
                } // 副标题
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                data: [''],
                bottom: 0, //底部
                itemWidth: 10,
                itemHeight: 10,
                icon: 'circle'
            },
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                        // formatter: (obj) => {
                        //     return `${obj.data.name}` + '\n\n' + `${obj.data.value}`;
                        // },
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 14,
                            fontWeight: 'bold',
                            formatter: (obj) => {
                                return `${obj.data.name}` + '\n\n' + `${obj.data.value}`;
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: []
                }
            ]
        });
        const { setOptions, clearChart } = useEcharts(chartRef, defaultOption, props.defaultColor.length ? props.defaultColor : null);
        const updateChart = () => {
            const { seriesName, typeArr, dataArr } = props.option;
            if (dataArr.length) {
                defaultOption.value.legend.data = [...typeArr];
                defaultOption.value.series[0].data = [...dataArr];
                defaultOption.value.series[0].name = seriesName;
                nextTick(() => {
                    setOptions(unref(defaultOption));
                });
            } else {
                clearChart();
            }
        };
        watch(
            () => props.option,
            (n) => {
                if (isNotEmpty(n)) {
                    updateChart();
                }
            },
            { immediate: true, deep: true }
        );
        return { chartRef };
    }
});
</script>

